<template>
    <div class="shop-index">
        <div class="ls-card header">
            <el-form :inline="true" :model="searchObj" class="demo-form-inline" size="small">
                <el-form-item label="套餐名称">
                    <el-input class="ls-input" v-model="searchObj.shop_info" placeholder="请输入套餐名称"></el-input>
                </el-form-item>
                <el-form-item label="套餐状态">
                    <el-select class="ls-input" v-model="searchObj.status" placeholder="全部">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="关闭" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="searchObj.create_time"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getSetMealLists">查询</el-button>
                    <el-button type="style" @click="reset">重置</el-button>
                    <export-data class="m-l-10" :pageSize="pager.size" :method="apiSetMealLists" :param="searchObj">
                    </export-data>
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card m-t-16">
            <div class="m-b-16">
                <el-button type="primary" size="small" @click="$router.push('/shop/set_meal_edit')">新增套餐</el-button>
            </div>

            <el-table :data="pager.lists" ref="paneTable" style="width: 100%;" size="mini" v-loading="pager.loading">
                <!-- ID -->
                <el-table-column label="ID" prop="id" width="100"></el-table-column>
                <!-- 套餐名称 -->
                <el-table-column prop="name" label="套餐名称" min-width="200">
                </el-table-column>
                <!-- 套餐说明 -->
                <el-table-column prop="explain" label="套餐说明" min-width="280">
                </el-table-column>
                <!-- 套餐价格 -->
                <el-table-column prop="price_desc" label="套餐价格" min-width="160">
                  <template slot-scope="scope">
                    <el-popover
                        placement="top"
                        width="200"
                        trigger="hover"
                    >
                      <div slot="reference">¥{{ scope.row.price_desc }}</div>

                      <div class="m-t-10" v-for="(item, index) in scope.row.set_meal_price" :key="index">
                        <span>{{ item.time }}</span>
                        <span>{{ item.time_type == 1 ? '月' : '年' }}</span>
                        <span class="m-l-10">¥{{ item.price }}</span>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <!-- 商城数量 -->
                <el-table-column prop="shop_num" label="商城数量" min-width="150">
                </el-table-column>
                <!-- 套餐状态 -->
                <el-table-column prop="status" label="套餐状态" min-width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                            @change="shopSwitchStatusEdit($event, scope.row.id)">
                        </el-switch>
                        <span class="m-l-10">{{scope.row.status_desc}}</span>
                    </template>
                </el-table-column>
                <!-- 排序 -->
                <el-table-column prop="sort" label="排序" min-width="150">
                </el-table-column>
                <!-- 创建时间 -->
                <el-table-column prop="create_time" label="创建时间" min-width="200">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" min-width="250">
                    <template slot-scope="scope">
                        <div class="flex">
                            <!-- 编辑 -->
                            <el-button @click="toSetMealEdit(scope.row.id)" type="text" size="small">编辑</el-button>

                            <!-- 删除商城 -->
                            <ls-dialog class="m-l-10 inline" @confirm="onSetMealDelete(scope.row)">
                                <el-button type="text" size="mini" slot="trigger">删除
                                </el-button>
                            </ls-dialog>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts">
import { apiSetMealLists, apiSetMealSwitchStatus, apiSetMealDelete } from '@/api/shop'
import { Component, Prop, Vue } from 'vue-property-decorator'
import lsPagination from '@/components/ls-pagination.vue'
import ExportData from '@/components/export-data/index.vue'
import LsDialog from '@/components/ls-dialog.vue'
import { RequestPaging } from '@/utils/util'
@Component({
  components: {
    lsPagination,
    ExportData,
    LsDialog
  }
})
export default class SetMealList extends Vue {
  /** S Data **/

    apiSetMealLists = apiSetMealLists;

    pager: RequestPaging = new RequestPaging();

    searchObj: Object = {
      status: '',
      shop_info: '',
      create_time: ''
    };
    /** E Data **/

    /** S Methods **/

    // 获取商城列表
    getSetMealLists (): void {
      this.pager.request({
        callback: apiSetMealLists,
        params: {
          ...this.searchObj
        }
      })
    }

    // 修改商城状态
    async shopSwitchStatusEdit (status: number, id: number): Promise<void> {
      await apiSetMealSwitchStatus({ id, status: status })
      this.getSetMealLists()
    }

    // 删除商城
    async onSetMealDelete (row: any): Promise<void> {
      await apiSetMealDelete({ id: row.id })
      this.getSetMealLists()
    }

    // 重置搜索
    reset (): void {
      Object.keys(this.searchObj).map((key) => {
        this.$set(this.searchObj, key, '')
      })
      this.getSetMealLists()
    }

    // 去编辑商城
    toSetMealEdit (id: number | any): void {
      this.$router.push({
        path: '/shop/set_meal_edit',
        query: {
          id: id
        }
      })
    }

    /** E Methods **/

    /** S ods **/
    created () {
      this.getSetMealLists()
    }
}
</script>
<style lang="scss" scoped>
/deep/ .header .el-form-item {
    margin-bottom: 0;
}
.ls-input {
    width: 280px;
}
</style>
